{% extends "base.html" %}{% load i18n crm_tags %}
{% block title %}{% translate "Reports" %}{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <h1>{% translate "Reports" %}</h1>
    <p>{% blocktranslate trimmed with start=first_day|date:"j M Y" end=today|date:"j M Y" %}{{ start }} to {{ end }}{% endblocktranslate %}</p>
  </div>
  <div class="actions">
    <div class="seg" aria-label="{% translate 'Period' %}">
      {% for value, label in ranges %}<a href="?days={{ value }}"{% if value == days %} aria-current="true"{% endif %}>{{ label }}</a>{% endfor %}
    </div>
    <a class="btn" href="{% url 'export' 'calls' %}">{% translate "Download calls (CSV)" %}</a>
  </div>
</div>

<div class="figures">
  <div><span class="n">{{ total_calls }}</span><span class="l">{% translate "Calls" %}</span></div>
  <div><span class="n">{{ reach_rate }}%</span><span class="l">{% translate "Calls where we spoke with them" %}</span></div>
  <div><span class="n">{{ prayer_total }}</span><span class="l">{% blocktranslate trimmed %}Prayer requests, {{ answered }} answered{% endblocktranslate %}</span></div>
  <div><span class="n">{{ testimonies }}</span><span class="l"><a href="{% url 'testimony_list' %}">{% translate "Testimonies" %}</a></span></div>
  <div><span class="n">{{ new_contacts }}</span><span class="l">{% blocktranslate trimmed count n=new_believers %}New contacts, {{ n }} new believer{% plural %}New contacts, {{ n }} new believers{% endblocktranslate %}</span></div>
</div>

<section class="panel">
  <div class="panel-head"><h2>{% translate "Calls per day" %}</h2><span class="muted small">{% blocktranslate trimmed %}Busiest day: {{ peak }}{% endblocktranslate %}</span></div>
  <div class="bars" role="img" aria-label="{% translate 'Calls per day' %}">
    {% for d in per_day %}<span class="bar{% if not d.n %} zero{% endif %}" style="height:{{ d.height }}%" title="{{ d.day|date:'l j M' }}: {{ d.n }}"></span>{% endfor %}
  </div>
  <div class="bars-axis"><span>{{ per_day.0.day|date:"j M" }}</span><span>{{ today|date:"j M" }}</span></div>
</section>

<div class="split-even" style="margin-top:20px">
  <section class="panel">
    <div class="panel-head"><h2>{% translate "What people called about" %}</h2></div>
    {% if by_purpose %}
    <ul class="meter">
      {% for row in by_purpose %}<li><span class="tag p-{{ row.purpose }}">{{ row.label }}</span><span class="track"><span class="fill" style="width:{{ row.share }}%"></span></span><span class="v">{{ row.n }}</span></li>{% endfor %}
    </ul>
    {% else %}<p class="muted small">{% translate "No calls in this period." %}</p>{% endif %}
  </section>
  <section class="panel">
    <div class="panel-head"><h2>{% translate "Prayer requests by need" %}</h2></div>
    {% if prayer_by_cat %}
    <ul class="meter">
      {% for row in prayer_by_cat %}<li><span>{{ row.label }}</span><span class="track"><span class="fill sun" style="width:{{ row.share }}%"></span></span><span class="v">{{ row.n }}</span></li>{% endfor %}
    </ul>
    {% else %}<p class="muted small">{% translate "No prayer requests in this period." %}</p>{% endif %}
  </section>
</div>

<section class="panel" style="margin-top:20px">
  <div class="panel-head"><h2>{% translate "How new contacts heard about us" %}</h2></div>
  {% if heard_from %}
  <ul class="meter">
    {% for row in heard_from %}<li><span{% if not row.heard_from %} class="muted"{% endif %}>{{ row.label }}</span><span class="track"><span class="fill" style="width:{{ row.share }}%"></span></span><span class="v">{{ row.n }}</span></li>{% endfor %}
  </ul>
  {% else %}<p class="muted small">{% translate "No new contacts in this period." %}</p>{% endif %}
</section>

<section class="panel" style="margin-top:20px">
  <div class="panel-head"><h2>{% translate "Where new contacts are from" %}</h2></div>
  {% if by_region %}
  <ul class="meter">
    {% for row in by_region %}<li><span{% if not row.region %} class="muted"{% endif %}>{{ row.label }}</span><span class="track"><span class="fill" style="width:{{ row.share }}%"></span></span><span class="v">{{ row.n }}</span></li>{% endfor %}
  </ul>
  {% else %}<p class="muted small">{% translate "No new contacts in this period." %}</p>{% endif %}
</section>

<section style="margin-top:20px">
  <div class="panel-head"><h2>{% translate "Agents" %}</h2></div>
  {% if per_agent %}
  <div class="table-wrap">
    <table>
      <thead><tr><th>{% translate "Agent" %}</th><th class="right">{% translate "Calls" %}</th><th class="right">{% translate "Spoke with them" %}</th><th class="right hide-sm">{% translate "Minutes on calls" %}</th></tr></thead>
      <tbody>
      {% for row in per_agent %}
        <tr>
          <td class="title">{% if row.agent__first_name %}{{ row.agent__first_name }} {{ row.agent__last_name }}{% elif row.agent__username %}{{ row.agent__username }}{% else %}{% translate "Former agent" %}{% endif %}</td>
          <td class="right num">{{ row.total }}</td>
          <td class="right num">{{ row.spoke }}</td>
          <td class="right num hide-sm">{{ row.minutes|default:"—" }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}<div class="panel empty">{% translate "No calls in this period." %}</div>{% endif %}
</section>

<div class="figures" style="margin-top:20px">
  <div><span class="n">{{ tickets_opened }}</span><span class="l">{% translate "Tickets opened" %}</span></div>
  <div><span class="n">{{ tickets_resolved }}</span><span class="l">{% translate "Of those, resolved" %}</span></div>
  <div class="{% if tickets_escalated %}warn{% endif %}"><span class="n">{{ tickets_escalated }}</span><span class="l">{% translate "Escalated" %}</span></div>
  <div class="{% if tickets_crisis %}warn{% endif %}"><span class="n">{{ tickets_crisis }}</span><span class="l">{% translate "Callers in danger" %}</span></div>
  <div><span class="n">{{ tickets_open_now }}</span><span class="l">{% translate "Open right now" %}</span></div>
</div>

<div class="figures" style="margin-top:20px">
  <div><span class="n">{{ fu_created }}</span><span class="l">{% translate "Follow-ups planned" %}</span></div>
  <div><span class="n">{{ fu_done }}</span><span class="l">{% translate "Of those, done" %}</span></div>
  <div class="{% if fu_overdue %}warn{% endif %}"><span class="n" {% if fu_overdue %}style="color:var(--alert)"{% endif %}>{{ fu_overdue }}</span><span class="l">{% translate "Late right now" %}</span></div>
  <div><span class="n money" style="font-size:1.25rem">{{ given|tzs }}</span><span class="l">{% translate "Giving recorded" %}</span></div>
</div>
{% endblock %}